<template>
  <div class="user_article">
    <div class="title_nav">
      <h3 style="color:gray">我的文章</h3>
      <div>
        <a href="./article/uploadArticle"><input type="button" value="上传"></a>
      </div>
    </div>
    <div class="article_list">
      <ul>
        <li>
          <span><svg class='icon' aria-hidden='true'>
            <use xlink:href='#icon-bianhao'></use>
          </svg> 编号</span>
          <span><svg class='icon' aria-hidden='true'>
            <use xlink:href='#icon-fabiaopinglun'></use>
          </svg> 标题</span>
          <span><svg class='icon' aria-hidden='true'>
            <use xlink:href='#icon-shijian1'></use>
          </svg> 上传时间</span>
          <span>
            <div class="state">
              <span><svg class='icon' aria-hidden='true'>
                <use xlink:href='#icon-shenhe'></use>
              </svg> 审核状态</span>
              <ul class="state_list">
                <li @click="filterState">待审核</li>
                <li @click="filterState">未通过</li>
                <li @click="filterState">已通过</li>
              </ul>
            </div>
          </span>
          <span class="oper"><svg class='icon' aria-hidden='true'>
            <use xlink:href='#icon-shezhi'></use>
          </svg> 操作</span>
        </li>
        <li v-for="item in res" :key="item.articleid">
          <span>{{getIndex(item.articleid)}}</span>
          <span>{{item.title}}</span>
          <span>{{getTime(item.time)}}</span>
          <span :style="{color: stateColor(item.state)}">{{item.state}}</span>
          <span class="oper">
            <a :href="'/article/' + item.articleid" title="查看" target="_blank" v-if="item.state=='已通过'" class="btn btn_blue">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-chakan"></use>
              </svg><span>查看</span>
            </a>
           <div @click="changeArticle(item)" title="修改" v-if="item.state!='已通过'" class="btn btn_green">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xiugai"></use>
              </svg><span>修改</span>
            </div>
            <div title="删除" @click="removeArticle(item.articleid)" class="btn btn_red">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-shanchu"></use>
              </svg><span>修改</span>
            </div>
          </span>
        </li>
        <li v-if="!res.length"><span>暂无结果</span></li>
      </ul>
    </div>
    <paging-vue :result="result" :count="10" @result="showRes"></paging-vue>
  </div>
</template>

<script>
import pagingVue from '../../info/mini/paging.vue'
import { mapActions } from 'vuex'
import tool from '../../../assets/js/tool'
export default {
  name: 'InfoArticle',

  data() {
    return {
      result: [], // 所有文章数据集
      res: [] // 当前展示文章数据集
    };
  },
  computed: {
    stateColor(){
      return (state) => {
        switch(state){
          case '已通过': return 'green';
          case '未通过': return 'red';
          default: return 'gray'
        }
      }
    },
    getIndex(){
      return (id) => this.result.map((v) => v.articleid).indexOf(id) + 1
    },
    getTime(){
      return (time) => tool.GetTimer(time)
    }
  },

  mounted() {
    this.init()
  },

  methods: {
    // 初始化
    init(){
       return this.$api.getUserArticle().then(res => {
        this.result = res.data
      })
    },
    // 删除文章
    removeArticle(id){
      if(confirm('确认删除?')){
        this.$api.removeArticle({id}).then(res => {
          if(res != 1){
            this.showHint({title: res,isFlag: false})
          }else{
            this.showHint({title: '删除成功',isFlag: true})
            this.init()
          }
        })
      }
    },
    // 修改文章
    changeArticle(article){
      this.$router.push({
        query: {...article},
        path: '/User/article/uploadArticle'
      })
    },
    // 过滤审核
    filterState(e){
      this.init().then(() => {
        this.result = this.result.filter(v => v.state == e.target.innerText) 
      })
    },
    // 分页
    showRes(res){
      this.res = res
    },
    ...mapActions(['showHint'])
  },

  components:{
    pagingVue
  }
};
</script>

<style scoped>
.article_list{
  width: 100%;
}
.article_list ul{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-left: 1px solid gray;
}
.article_list ul li:first-child{
  background-color: green;
  color: white;
}
.article_list ul li{
  display: flex;
  width: 100%;
  height: 40px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid gray;
}
.article_list ul li:hover{
  background-color: antiquewhite;
}
.article_list ul li:first-child:hover{
  background-color: green;
}
.article_list ul li span{
  height: 40px;
  flex: 1;
  line-height: 40px;
  text-align: center;
  border-right: 1px solid gray;
  justify-content: center;
}
.article_list ul li span:first-child{
  max-width: 80px;
}
.article_list ul li span:last-child{
  border-right: none;
}
.article_list ul li span:nth-child(2){
  flex: 2;
  justify-content: flex-start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.article_list .state span{
  border: none;
  cursor: pointer;
}
.state span::after{
  display: inline-block;
  content: '';
  border-width: 6px;
  border-style: solid;
  border-color: white transparent transparent transparent;
  margin: 4px;
  vertical-align: text-top;
}
.state:hover .state_list{
  display: flex;
}
.article_list ul.state_list{
  width: 60%;
  display: none;
  position: relative;
  z-index: 9999;
  transition: all .3s ease;
  background-color: #ececec;
  color: gray;
  border: 1px solid gray;
  box-shadow: 0 0 7px wheat;
  border-top: none;
  margin: auto;
}
.article_list ul.state_list li:first-child{
  background-color: #ececec;
  color: gray;
}
.article_list ul.state_list li:first-child:hover{
  background-color: wheat;
}
.article_list ul.state_list li{
  cursor: pointer;
  justify-content: center;
}
.article_list .oper span{
  line-height: 0;
}
@media screen and (max-width:800px){
  .user_article{
    padding: 10px;
  }
  .article_list ul li span:nth-child(3){
    display: none;
  }
  .article_list ul li span:nth-child(1){
    max-width: 30px;
  }
  .article_list ul li span:nth-child(2){
    flex: 1;
  }
}
</style>